<template>
	<view>
		<view v-for="(item, index) in options" :key="index+'dict'">
			<template v-if="values.includes(item.value)">
				<span :key="item.value" :index="index">{{ item.label}}</span>
				<!-- :class="item.raw.cssClass" -->
			</template>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'DictTag',
		props: {
			options: {
				type: Array,
				default: null,
			},
			value: [Number, String, Array],
			name: {
				type: String,
				default: null,
			}
		},
		watch: {
			options: {
				handler(val) {
					console.log('11111111111', val, this.value);
				},
				deep: true
			}
		},
		computed: {
			values() {
				if (this.value !== null && typeof this.value !== 'undefined') {
					return Array.isArray(this.value) ? this.value : [String(this.value)]
				} else {
					return []
				}
			},
		},
	}
</script>
<style scoped>
	.el-tag+.el-tag {
		margin-left: 10px;
	}
</style>